<template>
  <basic-dialog
    width="40%"
    title="选择驳回原因"
    :visible="visible"
    :handleClose="handleClose"
  >
    <label-select
      size="mini"
      :value.sync="rejectReason.value"
      :options="rejectReason.options"
    >
      <span class="require_sign">*</span>
      <span>驳回原因：</span>
    </label-select>
    <div class="reject-wrap">
      <template v-if="specialReason">
        <el-alert
          :title="`当前驳回原因为${specialReason}，请确定后返回详情列表逐条维护`"
          :closable="false"
          type="warning"
          show-icon
        />
      </template>
      <template v-else>
        <span class="require_sign">*</span>
        <span>驳回详情：</span>
        <el-input
          type="textarea"
          resize="none"
          v-model.trim="rejectReason.details"
          placeholder="请输入驳回详情"
          :autosize="false"
          :maxlength="inputMaxlength"
          :show-word-limit="!!inputMaxlength"
        />
      </template>
    </div>
    <div slot="ft" class="footer-wrap">
      <el-button
        type="primary"
        :loading="okLoading"
        @click="handleOk">确定
      </el-button>
      <el-button @click="handleClose">取消</el-button>
    </div>
  </basic-dialog>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';
import LabelSelect from '@/pages/commodity/components/LabelSelect';
import { REJECT_REASON_ENUMS, REJECT_REASON_OPTIONS } from '../../constants/config';
export default {
  components: {
    BasicDialog,
    LabelSelect
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    inputMaxlength: {
      type: Number
    }
  },
  data () {
    return {
      rejectReason: {
        value: '',
        details: '',
        options: REJECT_REASON_OPTIONS
      },
      okLoading: false
    }
  },
  computed: {
    specialReason () {
      if (this.rejectReason.value == REJECT_REASON_ENUMS.Product) return '已有正常/潜在商品'
      if (this.rejectReason.value == REJECT_REASON_ENUMS.CategoryAndClassify) return '品类/归类问题'
    }
  },
  methods: {
    // 校验必填
    validateRequireItems () {
      if (!this.rejectReason.value) return this.$message.warning('驳回原因不能为空！')
      const isNotRequire = [REJECT_REASON_ENUMS.Product, REJECT_REASON_ENUMS.CategoryAndClassify].includes(this.rejectReason.value)
      if (!isNotRequire && !this.rejectReason.details) return this.$message.warning('驳回详情不能为空')
    },
    // 确定
    handleOk () {
      if (this.validateRequireItems()) return
      const { value: reasonType, details: reasonNote } = this.rejectReason
      this.$emit('get-reason', { reasonType, reasonNote })
      this.clearState()
      this.handleClose()
    },
    // 取消
    handleClose () {
      this.$emit('update:visible', false)
    },
    // 清空状态
    clearState () {
      this.rejectReason.value = ''
      this.rejectReason.details = ''
    }
  }
}
</script>
<style lang="less" scoped>
.reject-wrap {
  display: flex;
  margin-top: 10px;
  .el-textarea {
    flex: 1;
  }
}

.require_sign {
  color: #e47470;
}

.footer-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}
/deep/ .el-dialog__body {
  min-height: 200px;
}
</style>
